<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <div id="box">
      hello box
      <p>
        <b>hello b</b>
        hello p
        <span>hello span</span>
      </p>
    </div> -->

    <script>
      const div = document.createElement("div");
      const p = document.createElement("p");
      const b = document.createElement("b");
      const span = document.createElement("span");
      div.innerHTML = "hello div";
      div.id = "box";
      p.innerHTML = "hello p";
      b.innerHTML = "hello b";
      span.innerHTML = "hello span";
      div.append(p);
      p.prepend(b);
      p.append(span);

      setTimeout(() => {
        // console.log(div);
        document.body.append(div);
      }, 3000);
    </script>
  </body>
</html>
